<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        /* .metro-svg {
            height: 100%;
            fill: none;
            stroke: #AAA;
        } */
        .station {
            fill: #AAA;
            stroke: #F5F5F5;
            stroke-width: 4;
            r: 7;
            fill: #feb538;
        }
        .track {
            stroke-width: 4;
            stroke-linecap: round;
            stroke-linejoin: round;
            stroke: #feb538;
            fill: none;
        }
    </style>
</head>

<body>
    <div class="abs-center container">
        <!-- Header -->
        <h2>Metro Map</h2>

        <!-- Map SVG Container -->
        <div class="rela-block svg-container" style="width:1000px;height:45px">
            <svg  class="metro-svg"  version="1.1"
            baseProfile="full"
            width="300" height="200"
            xmlns="http://www.w3.org/2000/svg">
                <!-- <path class="track line1" d="M 60 400 L 110 400 Q 130 400 130 380 L 130 180 
                                         Q 130 160 110 160 L 20 160" /> -->
                <path class="track line4" d="M 60 320 L 800 320
                                         Q 840 320 860 360 " />
                <!-- Line 1 Stations -->
                <circle class="station line1" cx="60" cy="320" data-type="asdf" r="7" />
                <circle class="station line1" cx="100" cy="320" data-type="asdf" r="7" />
                <circle class="station line1" cx="140" cy="320" data-type="asdf" r="7" />
                <circle class="station line1" cx="180" cy="320" data-type="asdf" r="7" />
                <circle class="station line1" cx="220" cy="320" data-type="asdf" r="7" />
                <circle class="station line1" cx="260" cy="320" data-type="asdf" r="7" />
                <circle class="station line1" cx="300" cy="320" data-type="asdf" r="7" />
                <circle class="station line1" cx="340" cy="320" data-type="asdf" r="7" />
                <circle class="station line1" cx="380" cy="320" data-type="asdf" r="7" />
                <circle class="station line1" cx="420" cy="320" data-type="asdf" r="7" />
                <circle class="station line1" cx="460" cy="320" data-type="asdf" r="7" />
                <circle class="station line1" cx="500" cy="320" data-type="asdf" r="7" />
                <circle class="station line1" cx="540" cy="320" data-type="asdf" r="7" />
                <circle class="station line1" cx="580" cy="320" data-type="asdf" r="7" />
                <circle class="station line1" cx="620" cy="320" data-type="asdf" r="7" />
                <circle class="station line1" cx="660" cy="320" data-type="asdf" r="7" />
                <circle class="station line1" cx="700" cy="320" data-type="asdf" r="7" />
                <circle class="station line1" cx="740" cy="320" data-type="asdf" r="7" />
                <circle class="station line1" cx="780" cy="320" data-type="asdf" r="7" />
            </svg>
            <svg version="1.1"
     baseProfile="full"
     width="300" height="200"
     xmlns="http://www.w3.org/2000/svg">

  <!-- <rect width="100%" height="100%" fill="red" /> -->
  <path d="M10 10 H40 V25 H10 V10" fill="red"/>

</svg>
        </div>
<a>aaa</a>
        <!-- Track Select Bar -->
        <div class="rela-block select-container">
            <div class="mover left"></div>
            <div class="mover right"></div>
            <div class="abs-center track-select ts0">All Lines</div>
            <div class="abs-center track-select ts1">Coastal Line</div>
            <div class="abs-center track-select ts2">Central Line</div>
            <div class="abs-center track-select ts3">North Line</div>
            <div class="abs-center track-select ts4">East Line</div>
        </div>

    </div>

</body>

</html>